<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function () {

            $(".update_book").click(function () {
                let id = $(this).attr("update_id")

                $.ajax({
                    url: "book/" + id,
                    type: "get",
                    success: function (data) {
                        $("#id").val(data.id)
                        $("#name").val(data.name)
                        $("#price").val(data.price)
                        $("#author").val(data.author)
                        $("#sales").val(data.sales)
                        $("#stock").val(data.stock)
                    }
                })
            })

            $(".commit_btn").click(function () {
                $("#putForm").submit();
            })


            $("#add_btn").click(function () {
                $("#addForm").submit();
            })



            $(".delete_book").click(function () {

                let id = $(this).attr("delete_id");
                $.ajax(
                    {
                        url: "book/" + id,
                        type: "delete",
                        data:{
                            "pageNum":$(this).attr("pageNum")
                        },
                        success:function (data) {
                         location.href="/books?pageNum="+data
                        }
                    }
                )
            })
        })

    </script>
    <style>
        .container{

            border: #000000 1px solid;

        }
        .mynav div{
            height: 70px;

        }
        .mynav p{
            font-size: 16px;
            text-align: right;
            line-height: 70px;
            font-family: fangsong;
        }
        button{
            display: inline-block;
        }
    </style>

</head>
<body>

<div id="header">
    <img class="logo_img" alt="" th:src="@{/img/mylogo.png}" style="height: 100%">
    <span class="wel_word">图书管理系统</span>
    <div>
        <a th:href="@{/order_manager}">订单管理</a>
        <a th:href="@{/index.html}">返回商城</a>
    </div>
</div>

<!--修改模态框-->
<div class="modal fade" id="update_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    修改图书信息
                </h4>
            </div>
            <div class="modal-body" style="padding-top: 0px">
                <form role="form" method="post" id="putForm" th:action="@{/book}">
                    <input type="hidden" name="_method" value="put">
                    <input type="hidden" name="id" id="id">
                    <div class="form-group">
                        <label for="name">书名</label>
                        <input type="text" class="form-control" id="name" name="name">
                    </div>
                    <div class="form-group">
                        <label for="name">价格</label>
                        <input type="text" class="form-control" id="price" name="price">
                    </div>
                    <div class="form-group">
                        <label for="name">作者</label>
                        <input type="text" class="form-control" id="author" name="author">
                    </div>
                    <div class="form-group">
                        <label for="name">销量</label>
                        <input type="text" class="form-control" id="sales" name="sales" readonly>
                    </div>
                    <div class="form-group">
                        <label for="name">库存</label>
                        <input type="text" class="form-control" id="stock" name="stock">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary commit_btn">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--添加模态框-->


<div class="modal fade" id="add_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel2">
                    添加图书信息
                </h4>
            </div>
            <div class="modal-body" style="padding-top: 0px">
                <form role="form" method="post" id="addForm" th:action="@{/book}">
                    <input type="hidden" name="pageNum" th:value="${pageInfo.pages}">
                    <div class="form-group">
                        <label for="name">书名</label>
                        <input type="text" class="form-control"  name="name" placeholder="请输入书名">
                    </div>
                    <div class="form-group">
                        <label for="name">价格</label>
                        <input type="text" class="form-control"  name="price" placeholder="请输入价格">
                    </div>
                    <div class="form-group">
                        <label for="name">作者</label>
                        <input type="text" class="form-control"  name="author" placeholder="请输入作者">
                    </div>
                    <div class="form-group">
                        <label for="name">销量</label>
                        <input type="text" class="form-control"  name="sales" rplaceholder="请输入销量">
                    </div>
                    <div class="form-group">
                        <label for="name">库存</label>
                        <input type="text" class="form-control" name="stock" placeholder="请输入库存">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary " id="add_btn">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>




<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-hover table-condensed" >
				<thead>
				<tr>
					<td>名称</td>
					<td>价格</td>
					<td>作者</td>
					<td>销量</td>
					<td>库存</td>
					<td colspan="2">操作<button class="btn btn-link" data-toggle="modal" data-target="#add_model">添加</button></td>
				</tr>
				</thead>

				<tbody>
				<tr th:each="book:${pageInfo.list}">

					<td th:text="${book.name}"></td>
					<td th:text="${book.price}">20.00</td>
					<td th:text="${book.author}">霍金</td>
					<td th:text="${book.sales}">200</td>
					<td th:text="${book.stock}">400</td>
					<td>
						<button class="btn btn-link update_book" data-toggle="modal" data-target="#update_model"
								th:update_id="${book.id}">修改
						</button>
                        <button class="btn btn-link  delete_book" th:delete_id="${book.id}" th:pageNum="${pageInfo.pageNum}">删除</button>
					</td>

				</tr>
				</tbody>


            </table>
        </div>
    </div>
    <div class="row mynav">
            <div class="col-lg-6">
                <p>
                    当前第<span class="badge"><th:block th:text="${pageInfo.pageNum}"></th:block></span>页,
                    总<span class="badge"> <th:block th:text="${pageInfo.pages}"></th:block></span> 页,
                    总<span class="badge"><th:block th:text="${pageInfo.total}"></th:block></span>条记录
                </p>

            </div>
            <div class="col-lg-6 ">
                <ul class="pagination">
                    <th:block th:if="${pageInfo.hasPreviousPage}">
                        <li><a th:href="@{/books(pageNum=1)}">首页</a></li>
                        <li><a th:href="@{/books(pageNum=${pageInfo.pageNum}-1)}">&laquo;</a></li>
                    </th:block>
                    <th:block th:each="pageNum:${pageInfo.navigatepageNums}">
                        <th:block th:if="${pageNum==pageInfo.pageNum}">
                            <li class="disabled"><a th:href="@{/books(pageNum=${pageNum})}" th:text="${pageNum}" ></a></li>
                        </th:block>
                        <th:block th:if="${pageNum!=pageInfo.pageNum}">
                            <li><a th:href="@{/books(pageNum=${pageNum})}" th:text="${pageNum}" ></a></li>
                        </th:block>

                    </th:block>

                    <th:block th:if="${pageInfo.hasNextPage}">
                        <li><a th:href="@{/books(pageNum=${pageInfo.pageNum}+1)}">&raquo;</a></li>
                        <li><a th:href="@{/books(pageNum=${pageInfo.pages})}">末页</a></li>
                    </th:block>

                </ul>
            </div>

    </div>
</div>

</div>


<div id="bottom">
		<span>
			OneKingBookStore.Copyright &copy;2015
		</span>
</div>
</body>
</html>